<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
    <!-- 真实DOM -->
   <div class="title" style="color: red;">hello</div>

   <script src="./js/react.development.js"></script>
   <script src="./js/react-dom.development.js"></script>
   <script src="./js/babel.min.js"></script>


    <script type="text/babel">
        // 1 创建元素
        var vDOM = <div className='title' style={{color:'red'}} >hello</div>
        // var vDOM = <div className='title' style={{color:'red'}} >
        //         hello1
        //         <h2>hello2</h2>
        //         <h3>hello3</h3>
        //     </div>

        //2 babel : 解析jsx语法=> 执行js代码 ： createElement函数
        // var vDOM = React.createElement("div", {
        //     className: "title",
        //     style: {
        //         color: 'red'
        //     }
        // }, "hello");

        // var vDOM = React.createElement("div", {
        //     className: "title",
        //     style: {
        //         color: 'red'
        //     }
        //     },
        //      "hello1",
        //      React.createElement("h2", null, "hello2"),
        //      React.createElement("h3", null, "hello3")
        // );

        //3 : createElement 返回值 = js 对象（虚拟DOM）
        console.log(vDOM)

        //一个子元素
        // {
        //     type:'div',
        //     props:{
        //         children:'hello',
        //         className:'title',
        //         style:{color:'red'}
        //     }
        // }

        // 多个子元素虚拟
        //   {
        //     type:'div',
        //     props:{
        //         children:['hello',{
        //             type:'h2', 
        //             children:'hello2'
        //         },{
        //             type:'h3', 
        //             children:'hello3'
        //         }],
        //         className:'title',
        //         style:{color:'red'}
        //     }
        // }

        //4 虚拟DOM渲染到 容器里
        ReactDOM.render(vDOM,document.getElementById('app'))

        //05 真实DOM
        //<div class="title" style="color: red;">hello</div>
        var tDOM = document.querySelector('title')
        console.dir(tDOM)

        //总结：
        // 减少重绘面积 减少重绘次数
        // 真实DOM 和 虚拟DOM 对比：创建虚拟DOM 和创建普通js对象一样 开销极小（相对真实DOM）
        // 性能高
  
    </script>
</body>
</html>